// 模块状态显示组件 - 基于用户需求说明

import React from 'react';
import { useHmiState } from '../hooks/useHmiState';
import {
  Camera,
  Radar,
  MapPin,
  AlertTriangle,
  CheckCircle,
  XCircle,
  Cpu,
  Navigation,
  Settings
} from 'lucide-react';

const ModuleStatusPanel: React.FC = () => {
  const { moduleStatus, userRole } = useHmiState();

  const getModuleIcon = (module: string) => {
    switch (module) {
      case 'camera':
        return <Camera size={18} />;
      case 'lidar':
        return <Radar size={18} />;
      case 'radar':
        return <Radar size={18} />;
      case 'gps':
        return <MapPin size={18} />;
      case 'imu':
        return <Navigation size={18} />;
      case 'can':
        return <Cpu size={18} />;
      default:
        return <Settings size={18} />;
    }
  };

  const getModuleName = (module: string) => {
    const names: { [key: string]: string } = {
      camera: '摄像头',
      lidar: '激光雷达',
      radar: '毫米波雷达',
      gps: 'GPS定位',
      imu: '惯性测量单元',
      can: 'CAN总线'
    };
    return names[module] || module;
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'online':
        return <CheckCircle size={16} className="text-success-400" />;
      case 'warning':
        return <AlertTriangle size={16} className="text-warning-400" />;
      case 'offline':
        return <XCircle size={16} className="text-danger-400" />;
      default:
        return <XCircle size={16} className="text-gray-400" />;
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'online':
        return 'border-success-500/30 bg-success-500/10';
      case 'warning':
        return 'border-warning-500/30 bg-warning-500/10';
      case 'offline':
        return 'border-danger-500/30 bg-danger-500/10';
      default:
        return 'border-gray-500/30 bg-gray-500/10';
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case 'online':
        return '在线';
      case 'warning':
        return '警告';
      case 'offline':
        return '离线';
      default:
        return '未知';
    }
  };

  // 乘客模式下隐藏模块状态
  if (userRole.type === 'passenger') {
    return null;
  }

  return (
    <div className="control-panel">
      <h3 className="text-lg font-semibold mb-4 text-white">系统模块状态</h3>
      
      {/* 模块状态网格 */}
      <div className="grid grid-cols-2 gap-3 mb-4">
        {Object.entries(moduleStatus).map(([module, status]) => (
          <div
            key={module}
            className={`p-3 rounded-lg border ${getStatusColor(status)}`}
          >
            <div className="flex items-center justify-between mb-2">
              <div className="flex items-center gap-2">
                {getModuleIcon(module)}
                <span className="text-sm font-medium text-white">
                  {getModuleName(module)}
                </span>
              </div>
              {getStatusIcon(status)}
            </div>
            <div className="text-xs text-gray-300">
              状态: {getStatusText(status)}
            </div>
          </div>
        ))}
      </div>

      {/* 系统健康度 */}
      <div className="mb-4">
        <div className="flex items-center justify-between mb-2">
          <span className="text-sm text-gray-300">系统健康度</span>
          <span className="text-sm text-white font-medium">
            {Math.round((Object.values(moduleStatus).filter(s => s === 'online').length / Object.keys(moduleStatus).length) * 100)}%
          </span>
        </div>
        <div className="w-full bg-gray-700 rounded-full h-2">
          <div
            className="bg-success-500 h-2 rounded-full transition-all duration-300"
            style={{
              width: `${(Object.values(moduleStatus).filter(s => s === 'online').length / Object.keys(moduleStatus).length) * 100}%`
            }}
          />
        </div>
      </div>

      {/* 故障提示 */}
      {Object.values(moduleStatus).some(status => status === 'warning' || status === 'offline') && (
        <div className="border-t border-gray-700 pt-4">
          <h4 className="text-sm font-medium text-warning-400 mb-2">故障提示</h4>
          <div className="space-y-2">
            {Object.entries(moduleStatus)
              .filter(([_, status]) => status === 'warning' || status === 'offline')
              .map(([module, status]) => (
                <div key={module} className="flex items-center gap-2 text-sm">
                  {status === 'warning' ? (
                    <AlertTriangle size={14} className="text-warning-400" />
                  ) : (
                    <XCircle size={14} className="text-danger-400" />
                  )}
                  <span className="text-gray-300">
                    {getModuleName(module)}: {getStatusText(status)}
                  </span>
                </div>
              ))}
          </div>
        </div>
      )}

      {/* 安全员控制选项 */}
      {userRole.type === 'safety_officer' && (
        <div className="border-t border-gray-700 pt-4 mt-4">
          <h4 className="text-sm font-medium text-gray-300 mb-3">模块控制</h4>
          <div className="grid grid-cols-2 gap-2">
            <button className="hmi-button-secondary text-sm">
              重启系统
            </button>
            <button className="hmi-button-secondary text-sm">
              诊断模式
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default ModuleStatusPanel;
